<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>定点巡检积分换算设置</h2>
        </div>
      </div>
          <Card style="margin-bottom: 10px;">
            <div class="normal-list-page-hd clearfix">
              <Form v-model="queryData">
              <Row>
                <Col span="5" class="mr-10">
                <queryData @ProvinceData="childByValue"></queryData>
                </Col>
       
                设置类型：
                <Select class="mr-10" v-model="queryData.type" style="width:150px" :clearable=true>
                  <Option v-for="item in queryForm.type" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
         

              </Row>
            </Form>
            </div>
          </Card>
          <div class="normal-list-page-hd clearfix">
            <Button type="primary" custom-icon="iconfont icon-fangkuai2" size="small" @click="showCreateModal" class="fr">新建</Button>
          </div>
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
          </div>
        <!--新建&修改-->
        <Modal v-model="modal.system.isShow" :loading="modal.system.loading" :mask-closable="false" :title="modal.system.title"
          @on-ok="postData">
          <Form ref="systemFrom" :model="modal.system.formData" :rules="modal.system.rules" :label-width="120">
            <FormItem label="区域" prop="softPath">
              <Row>
                <Col>
                <queryData @ProvinceData="childByValue" style="width: 350px"></queryData>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="开始时间" prop="name">
              <Input placeholder="时间为24小时的整数" v-model="modal.system.formData.starttime" style="width:100px;" />
            </FormItem>
            <FormItem label="结束时间" prop="url">
              <Input placeholder="时间为24小时的整数" v-model="modal.system.formData.endtime" style="width:100px;" />
            </FormItem>
            <FormItem label="投递积分" prop="state">
              <Input v-model="modal.system.formData.integral" style="width:100px;" />
            </FormItem>
            <FormItem label="类型" prop="code addres sbType">
              <Select v-model="modal.system.formData.type" size="small" style="width:100px">
                <Option v-for="item in queryForm.classtype" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="垃圾类型" prop="code addres sbType">
              <Select v-model="modal.system.formData.garbagetype" size="small" style="width:100px">
                <Option v-for="item in queryForm.garbagetype" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Form>
        </Modal>
    </div>
  </div>

</template>
<script>
  import ConversionApi from "@/api/base_sys/conversion.js";
  import moment from "moment";
  import {
    Message
  } from "iview";
  import queryData from "@/view/test/cityTestZj.vue"

  export default {
    name: "conversion",
    components: {
      queryData
    },
    data() {
      return {
        //查询表单
        queryForm: {
          cityCascade: {
            getUp: [{
              id: '',
              name: '请选择'
            }],
            please: '',
            provid: [],
            cityid: [],
            distid: [],
            strt: [],
            commid: [],
            comminid: [],

          },
          type: [{
              value: 'inspection',
              label: '巡检',
            },
            {
              value: 'delivery',
              label: '分类'
            }
          ],
          classtype: [{
              value: 'inspection',
              label: '巡检'
            },
            {
              value: 'delivery',
              label: '厨余/其他'
            }
          ],
          garbagetype: [{
              value: '11',
              label: '厨余'
            },
            {
              value: '13',
              label: '其他'
            },
            {
              value: '10',
              label: '巡检'
            },
          ],

        },
        // 弹出层数据
        modal: {

          system: {
            isShow: false,
            loading: true,
            type: "create", // create 新建，update 修改
            title: "新建",
            rules: {},
            formData: {
              // id: undefined,
              // name: "",
              // url: "",
              // state: ""
            }
          }
        },
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [
            // 开始自动生成
            {
              title: "社区名称",
              key: "commname",
              align: "center",
              minWidth: 100
            },
            {
              title: "开始时间",
              key: "starttime",
              align: "center",
              minWidth: 100
            },
            {
              title: "结束时间",
              key: "endtime",
              align: "center",
              minWidth: 100
            },
            {
              title: "积分",
              key: "integral",
              align: "center",
              minWidth: 100
            },
            {
              title: "类型",
              key: "type",
              align: "center",
              minWidth: 100,
              render: (h, params) => {
                if (params.row.type == 'inspection') {
                  return h('div', '巡检');
                } else {
                  return h('div', '厨余和其他');
                }
              }
            },
            {
              title: "垃圾类型",
              key: "garbagetype",
              align: "center",
              minWidth: 100,
              render: (h, params) => {
                if (params.row.garbagetype == '11') {
                  return h('div', '厨余');
                } else {
                  return h('div', '其它');
                }
              }
            },
            {
              title: "每天产生积分次数",
              key: "times",
              align: "center",
              minWidth: 100
            },

            // 自动生成结束

            {
              title: "操作",
              align: "center",
              width: 130,
              render: (h, params) => {
                return h("div", {
                  class: "action-group"
                }, [
                  h(
                    'Tooltip', {
                      props: {
                        placement: 'right',
                        content: '删除'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button', {
                          props: {
                            type: 'error',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              this.delData([params.row.id])
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: ' iconfont icon-shanchusekuai',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  )
                ]);
              }
            }
          ]
        },
        // 页面查询数据
        queryData: {
          limit: 10,
          page: 1,
          totalRecord: 0,
          name: "",
          type: '',
        }
      };
    },
    methods: {
      // 获取列表
      getTableData() {
        const that = this;
        that.queryData.totalRecord = undefined;
        ConversionApi.getPageList(that.queryData)
          .then(res => {
            that.list.tableData = res.data.list;
            that.queryData.totalRecord = res.data.totalRecord;
            that.queryData.limit = res.data.pageSize;
          })
          .catch(error => {
            Message.error(error);
          });
      },
      // 新建
      postData() {
        const that = this;
        that.$refs["systemFrom"].validate(valid => {
          if (valid) {
            that.modal.system.formData.commid = that.queryData.commid;
            that.modal.system.formData.comminid = that.queryData.comminid;
            ConversionApi.add(that.modal.system.formData)
              .then(res => {
                that.modal.system.isShow = false;
                that.modal.system.loading = false;
                if (!res.code) {
                  that.getTableData();
                  that.$Notice.success({
                    title: "保存成功!"
                  });
                } else {
                  that.$Notice.error({
                    title: res.message
                  });
                }
              })
              .catch(error => {
                Message.error(error);
              });
          } else {
            that.modal.system.loading = false;
            that.$nextTick(() => {
              that.modal.system.loading = true;
            });
          }
        });
      },

      // 删除
      delData(id) {
        if (!id.length) {
          return;
        }
        this.$Modal.confirm({
          title: "确认删除",
          content: "<p>您确认删除该条记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>",
          loading: true,
          onOk: () => {
            ConversionApi.del(id).then(res => {
              this.$Modal.remove();
              if (!res.code) {
                this.$Notice.success({
                  title: "删除成功"
                });
                this.queryData.page = 1;
                this.getTableData();
              } else {
                this.$Notice.error({
                  title: res.message
                });
              }
            });
          }
        });
      },
      //城市级联
      childByValue(newObject) {
        this.queryData.provid = newObject.provid;
        this.queryData.commid = newObject.commid;
        this.queryData.cityid = newObject.cityid;
        this.queryData.comminid = newObject.comminid;
        this.queryData.distid = newObject.distid;
        this.queryData.strt = newObject.strt;
      },
      //查询
      inQuire() {
        const that = this;
				that.queryData.page=1;
        // ConversionApi.getPageList(that.queryData);
        that.getTableData();
      },
      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },


      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },

      // 显示新建弹窗
      showCreateModal() {
        this.modal.system.type = "create";
        this.modal.system.title = "新建";
        this.modal.system.formData = {};
        this.modal.system.isShow = true;
      },

    },

    created() {
      this.getTableData();
    }
  };
</script>
